<template>
	<view class="content">
		<view class="header">
			<view class="view">
				<view @click="show = true">
					<text>课件级别</text>
					<u-icon name="arrow-down-fill" color="#333" size="12"></u-icon>
				</view>
				<view @click="show = true">
					<text>语种</text>
					<u-icon name="arrow-down-fill" color="#333" size="12"></u-icon>
				</view>
			</view>
			<u--image :showLoading="true" src="../../static/logo.png" width="32rpx" height="32rpx"
				radius="0"></u--image>
		</view>
		<view class="Box">
			<view v-for="(item,index) in 4" :key="index" class="BoxView">
				<u--image :showLoading="true" src="../../static/logo.png" width="196rpx" height="250rpx"
					radius="0"></u--image>
				<text>KIDS BOX</text>
			</view>
		</view>
		
		<view class="empty" v-if="columns.length == 0">
			<image src="../../static/null.png" mode="widthFix"></image>
			<text>暂时没有预约课程</text>
		</view>
		
		<u-picker :show="show" :columns="columns" keyName="label"></u-picker>
		
		<u-popup :show="isShow" @close="isShow = false" @open="isShow = true" mode="center" round="20">
			<view class="NewpopupBody">
				<text class="title">确定要下载该课件吗？</text>
				<view class="but_flex">
					<button class="leftButton">取消</button>
					<button class="rightButton">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				isShow:true,
				columns: [
					[{
						label: '雪月夜',
						// 其他属性值
						id: 2021
						// ...
					}, {
						label: '冷夜雨',
						id: 804
					}]
				],
			}
		}
	}
</script>

<style>
	page{
		background-color:#f6f7f9;
	}
</style>
<style scoped lang="scss">
	.content {
		.header {
			width: auto;
			background-color: #fde8d0;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.view {
				width: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					display: flex;
					align-items: center;

					text {
						margin-right: 10rpx;
						color: #333333;
						font-size: 28rpx;
						font-weight: 600;
						font-family: PingFangSC, PingFang SC;
						text-align: left;
						font-style: normal;
					}
				}
			}
		}

		.Box {
			width:93%;
			margin:0px auto;
			display: flex;
			flex-wrap: wrap;
			justify-content:space-between;
			align-items: flex-start;

			.BoxView {
				width: 196rpx;
				min-width: 158rpx;
				// border:1px solid red;
				margin-top: 30rpx;

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					text-align: center;
					font-style: normal;
					display: block;
					margin-top: 10rpx;
				}
			}
		}
		
		.empty{
			image{
				width:100%;
			}
			text{
				display: block;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
			}
		}
		
		.NewpopupBody{
			width: 550rpx;
			height:auto;
			padding-top:70rpx;
			padding-bottom:70rpx;
			background-color: transparent;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				display: block;
				text-align: center;
			}
			.content_text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				display: block;
				text-align: center;
				padding-top:30rpx;
				padding-bottom:30rpx;
			}
			.but_flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top:50rpx;
				.leftButton{
					width:40%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					background-color:#efefef;
				}
				.rightButton{
					width:40%;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius:50rpx;
					background-color:#267fff;
				}
			}
		}
	}
</style>